<template>
  <el-dialog
    v-model="dialogVisible"
    title="零售出库详情"
    width="800px"
    :before-close="handleClose"
  >
    <div class="detail-content">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="单据编号">{{ detailData.orderNo }}</el-descriptions-item>
        <el-descriptions-item label="客户姓名">{{ detailData.customerName }}</el-descriptions-item>
        <el-descriptions-item label="客户电话">{{ detailData.customerPhone }}</el-descriptions-item>
        <el-descriptions-item label="总金额">{{ detailData.totalAmount }}</el-descriptions-item>
        <el-descriptions-item label="单据状态">
          <el-tag :type="getStatusType(detailData.status)">{{ detailData.status }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="支付方式">{{ getPaymentMethodText(detailData.paymentMethod) }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ detailData.createTime }}</el-descriptions-item>
        <el-descriptions-item label="创建人">{{ detailData.creatorName }}</el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">{{ detailData.remark || '无' }}</el-descriptions-item>
      </el-descriptions>
      
      <div class="product-detail">
        <h4>商品明细</h4>
        <el-table :data="detailData.products || []" border style="width: 100%">
          <el-table-column prop="productName" label="商品名称" />
          <el-table-column prop="quantity" label="数量" width="100" />
          <el-table-column prop="unitPrice" label="单价" width="120" />
          <el-table-column prop="amount" label="金额" width="120" />
        </el-table>
      </div>
    </div>
    
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'

const dialogVisible = ref(false)
const detailData = reactive({})

const getStatusType = (status) => {
  const statusMap = {
    'pending': 'warning',
    'submitted': 'primary',
    'completed': 'success'
  }
  return statusMap[status] || 'info'
}

const getPaymentMethodText = (method) => {
  const methodMap = {
    'cash': '现金',
    'wechat': '微信',
    'alipay': '支付宝',
    'card': '银行卡'
  }
  return methodMap[method] || method
}

const openDialog = (row) => {
  dialogVisible.value = true
  Object.assign(detailData, row)
  
  // 如果没有商品数据，添加模拟数据
  if (!detailData.products) {
    detailData.products = [
      {
        productName: '商品A',
        quantity: 2,
        unitPrice: 100.00,
        amount: 200.00
      },
      {
        productName: '商品B',
        quantity: 1,
        unitPrice: 150.00,
        amount: 150.00
      }
    ]
  }
}

const handleClose = () => {
  dialogVisible.value = false
  Object.assign(detailData, {})
}

// 暴露方法给父组件
defineExpose({
  openDialog
})
</script>

<style scoped lang="less">
.detail-content {
  .product-detail {
    margin-top: 20px;
    
    h4 {
      margin-bottom: 10px;
      color: #303133;
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style> 